<template>
  <div id="mainRightCenter">
    <div class="bg-color-black">
      <DecorativeTitle text="业务量" fontSize="15px" strokeColor="#00baff" />
      <!-- 四格布局容器 -->
      <div class="grid-container">
        <!-- 四个子组件区域 -->
        <div class="grid-item">
          <PreAcceptSourceChart/>
        </div>
        <div class="grid-item">
          <PreAcceptTypeChart/>
        </div>
        <div class="grid-item">
          <DispatchTypeChart/>
        </div>
        <div class="grid-item">
          <SpecialCircumstancesChart/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DecorativeTitle from "@/components/DecorativeTitle.vue";
import PreAcceptTypeChart from "@/views/main/business/preAcceptTypeChart/index.vue";
import PreAcceptSourceChart from "@/views/main/business/preAcceptSourceChart/index.vue";
import DispatchTypeChart from "@/views/main/business/dispatchTypeChart/index.vue";
import SpecialCircumstancesChart from "@/views/main/business/specialCircumstancesChart/index.vue";

export default {
  components: {
    DecorativeTitle,
    PreAcceptTypeChart,
    PreAcceptSourceChart,
    DispatchTypeChart,
    SpecialCircumstancesChart
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 580px;
$gap: 4px; // 网格间距

#mainRightCenter {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;

    // 网格容器
    .grid-container {
      width: 100%;
      height: calc(100% - 50px);
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr); // 2列等宽
      grid-template-rows: repeat(2, 1fr); // 2行等高
      gap: $gap; // 网格间距
    }

    // 网格项样式
    .grid-item {
      width: 100%;
      height: 240px;
      padding: 0px;
      box-sizing: border-box;
    }
  }
}
</style>
